<template>
	<view class="getMySound" :style="{ height: webStyle.height }">
		<view class="bgc"></view>
		<image class="bgi" :src="imgPath + 'login/Background.png'" mode=""></image>
		<view class="title-box" :style="{ 'padding-top': inf0Pt + 'vh' }">
			<image class="back" @click="back" :src="imgPath + 'AICont/back-arrow.svg'" mode="widthFix"></image>
			<view class="title">提交记录</view>
			<view class="back"></view>
		</view>
		<view class="main-list">
			<view class="item" v-for="(item, index) in mainList" :key="item.id">
				<view class="left">
					<view class="dot-big"></view>
				</view>
				<view class="right">
					<view class="title">
						<view class="text">{{ item.moderName }}</view>
					</view>
					<view class="desc">
						<view class="text">审核状态：{{ item.status }}</view>
					</view>
					<view class="footer">
						<view class="f-l"></view>
						<view class="f-r">
							<view class="toAICont" v-if="item.localSpeakerId" @tap="shitingCont(item, index)">{{ item.btn1Text }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<LoginDialog ref="LoginDialog" :show="LoginDialogShow" @successFn="loginDialogShowSucc" @changeShow="changeLoginDialogShow" style="z-index: 999"></LoginDialog>
	</view>
</template>

<script>
import { tools } from "@/utils/util.js";
import myRequest, * as request from "@/utils/api.js";
import * as api from "@/api/createVideo.js";
export default {
	name: "GetMySound",
	data() {
		return {
			imgPath: tools.imgPath,
			companyName: tools.companyName,
			inf0Pt: 0,
			systemInfo: {},
			webStyle: {
				height: ""
			},
			LoginDialogShow: false,
			pageInfo: {},
			mainListAc: null,
			mainList: [],
			shiTingCtx: null,
			shiTingContCtx: null,
			shiTingSrc: "",
			speed: 1,
			pitch: 0,
			volume: 100
		};
	},
	methods: {
		// 获取系统info
		initSystemInfo(isUpdate = true) {
			const that = this;
			return new Promise((resolve, reject) => {
				uni.getSystemInfo({
					success(payload) {
						if (isUpdate) {
							that.systemInfo = payload;
							that.webStyle.height = `${that.systemInfo.windowHeight}px`;
							console.log("initSystemInfo", that.systemInfo);
							switch (that.systemInfo.uniPlatform) {
								case "web":
									that.inf0Pt = 4.5;
									break;
								case "app":
									that.inf0Pt = 4.5;
									break;
								case "mp-weixin":
									that.inf0Pt = 5;
									break;
							}
						}
						resolve(payload);
					}
				});
			});
		},
		// 跳转页面
		toPage(path, type = "navigateTo") {
			uni[type]({
				url: path
			});
		},
		// 回退
		back() {
			let pages = getCurrentPages();
			if (pages.length > 1) {
				uni.navigateBack({
					delta: 1
				});
			} else {
				uni.setStorageSync("toHome", {
					footerBarListAc: 1
				});
				uni.reLaunch({
					url: "/pages/index/index"
				});
			}
		},
		// 获取页面参数
		initPageInfo(opt) {
			let pageInfo = uni.getStorageSync("AIContInfo");
			this.pageInfo = pageInfo;
			uni.removeStorageSync("AIContInfo");
		},
		// 监听登录弹出层显示
		changeLoginDialogShow(val) {
			this.LoginDialogShow = val;
		},
		// 登陆成功数据刷新
		loginDialogShowSucc() {
			this.getData();
		},
		// 文案shiTingCtx初始化
		initShiTingContCtx() {
			if (!this.shiTingContCtx) {
				this.shiTingContCtx = uni.createInnerAudioContext();

				// this.shiTingContCtx.obeyMuteSwitch = false;
				// this.shiTingContCtx.loop = true;
				this.shiTingContCtx.onPlay((res) => {
					let index = this.mainList.findIndex((e) => e.id == this.mainListAc);
					console.log("this.shiTingContCtx.onPlay", res, this.shiTingContCtx.obeyMuteSwitch, this.shiTingContCtx.volume);
					this.mainList[index].btn1Text = "停止";
				});
				this.shiTingContCtx.onPause((res) => {
					let index = this.mainList.findIndex((e) => e.id == this.mainListAc);
					console.log("this.shiTingContCtx.onPause", res);
					this.mainList[index].btn1Text = "试听";
				});
				this.shiTingContCtx.onEnded((res) => {
					let index = this.mainList.findIndex((e) => e.id == this.mainListAc);
					console.log("this.shiTingContCtx.onEnded", res);
					this.mainList[index].btn1Text = "试听";
					this.shiTingContCtx.seek(0);
				});
				this.shiTingContCtx.onStop((res) => {
					let index = this.mainList.findIndex((e) => e.id == this.mainListAc);
					console.log("this.shiTingContCtx.onStop", res);
					this.mainList[index].btn1Text = "试听";
					this.shiTingContCtx.seek(0);
				});
				this.shiTingContCtx.onSeeking((res) => {
					console.log("this.shiTingContCtx.onSeeking", this.shiTingContCtx.currentTime);
				});
				this.shiTingContCtx.onTimeUpdate((res) => {
					console.log("this.shiTingContCtx.onTimeUpdate", this.shiTingContCtx.currentTime);
				});
				this.shiTingContCtx.onError((err) => {
					console.log("this.shiTingContCtx.onError", err);
				});
			}
		},

		// 文案试听
		async shitingCont(item, index) {
			if (!this.shiTingContCtx) this.initShiTingContCtx();
			if (!item.localSpeakerId) {
				tools.easyToast("无法试听");
				return;
			}
			if (this.mainList[index].btn1Text == "请稍后") return;
			if (this.mainList[index].btn1Text == "试听") {
				this.mainList[index].btn1Text = "请稍后";
				let magicSpeakerId = item.localSpeakerId;
				let speaker = magicSpeakerId ? magicSpeakerId : "jupiter_BV406";
				let content = "";
				let sand = {
					speaker: speaker,
					text: content || "随着技术不断发展，" + this.companyName + "数字人在电商、直播、娱乐、教育、广告等领域的应用越来越广泛",
					text: content ? content : "你能看出我是AI吗？现在你看到的我其实并不是真实的我，而是我的数字分身",
					speed: this.speed ?? 1,
					pitch: this.pitch ?? 0,
					volume: this.volume ?? 100
				};
				console.log("sand", sand);
				let ttsRes = await api.postAudioTTS(sand);
				uni.hideLoading();
				console.log("文案试听", ttsRes);
				if (!ttsRes || !ttsRes.data || !ttsRes.data.includes("http")) {
					tools.easyToast("音频合成失败！请检查文案~");
					this.mainList[index].btn1Text = "试听";
					return;
				}
				this.shiTingSrc = ttsRes.data;
				this.shiTingContCtx.src = ttsRes.data;
				this.mainListAc = item.id;
				this.$set(this.shiTingContCtx, "volume", this.volume * 0.01);
				this.shiTingContCtx.play();
			} else {
				this.shiTingContCtx.stop();
				this.mainList[index].btn1Text = "试听";
			}
		},
		// 获取数据
		async getData() {
			let res = await api.postGptSovitsv2listModel();
			if (!res) return;
			let arr = [
				{
					id: 0,
					text: "待审核"
				},
				{
					id: 1,
					text: "成功"
				},
				{
					id: 2,
					text: "失败"
				},
				{
					id: 3,
					text: "合成中"
				},
				{
					id: 4,
					text: "驳回"
				}
			];
			this.mainList = res.data.map((e) => {
				return {
					...e,
					status: arr.find((item) => item.id == e.auditType).text,
					btn1Text: "试听"
				};
			});
		}
	},
	onLoad(opt) {
		this.initSystemInfo();
		this.initPageInfo(opt);
		this.getData();
		this.initShiTingContCtx();
	},
	onUnload() {
		this.shiTingContCtx?.pause();
	}
};
</script>

<style lang="scss">
::-webkit-scrollbar {
	width: 0vw !important;
	height: 0vw !important;
	display: none;
}

.getMySound {
	width: 100vw;
	// height: 100vh;
	position: relative;
	color: #fff;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	.title-box {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 2vw;

		.back {
			width: 6vw;
		}

		.title {
			font-size: 36rpx;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
		}
	}
	.bgc {
		position: absolute;
		z-index: -2;
		background: #0c1411;
		width: 100%;
		height: 100%;
		top: 0vw;
		left: 0vw;
	}
	.bgi {
		position: absolute;
		z-index: -1;
		width: 100%;
		height: 100%;
		top: 0vw;
		left: 0vw;
	}
	.main-list {
		width: 100%;
		flex: 1;
		overflow: auto;
		--border-style: 1.5px solid #070709;
		--cell-height: 14vw;
		.item {
			display: flex;
			width: 100%;
			border-top: var(--border-style);
			border-bottom: var(--border-style);
			box-sizing: border-box;
			padding: 3vw 0vw;
			position: relative;

			&.ac {
				border: 2px solid #4d7ef9;
				background: linear-gradient(130deg, #00997f -200%, transparent);
				border-right: none;
				.left {
					.dot-big {
						background: rgba(243, 173, 51, 1);
					}
				}
				.right {
					.title {
						.text {
							color: rgba(0, 153, 127, 1);
						}
					}
				}
			}

			.left {
				--dot-size: 3vw;
				width: 10vw;
				display: flex;
				justify-content: center;
				box-sizing: border-box;
				padding-top: 2vw;
				.dot-big {
					box-sizing: border-box;
					border-radius: 50%;
					border: 2px solid rgba(243, 173, 51, 1);
					width: var(--dot-size);
					height: var(--dot-size);
				}
			}

			.right {
				flex: 1;
				color: rgba(187, 187, 187, 1);
				.title {
					.text {
						font-size: 3.5vw;
					}
				}
				.desc {
					margin: 2vw 0vw;
					.text {
						font-size: 3.5vw;
					}
				}
				.footer {
					display: flex;
					justify-content: space-between;
					align-items: center;
					.f-l {
						display: flex;
						.fl-item {
							display: flex;
							align-items: center;
							margin-right: 5vw;
							&.comment {
								.icon {
									width: 3.6vw;
									max-height: 3.6vw;
								}
							}
							.icon {
								width: 4vw;
								max-height: 4vw;
								margin-right: 1.6vw;
								display: block;
							}
							.text {
								font-size: 3vw;
							}
						}
					}
					.f-r {
						padding-right: 2vw;
						display: flex;
						.toAICont {
							font-size: 2.86vw;
							display: flex;
							justify-content: center;
							align-items: center;
							flex-direction: column;
							opacity: 1;
							border-radius: 100vw;
							margin-right: 3vw;
							background: linear-gradient(223.28deg, #06d4b8 0%, #a1f071 99.72%);
							background: #00997f;
							box-sizing: border-box;
							padding: 1.6vw 3vw;
							color: #fff;
						}
					}
				}
			}

			.share {
				position: absolute;
				top: 2vw;
				right: 5vw;

				.icon {
					width: 5vw;
					max-height: 5vw;
				}
			}
		}
	}
}
</style>
